<template>
  <view class="staging">
    <view
      class="staging-top"
      :style="{
        width: '100%',
        height: '600rpx',
        background: `url(${seizeOrdersTop}) no-repeat center`,
        backgroundSize: 'cover',
      }"
    >
      <view class="nav-bar">
        <view class="nav-title">工作台</view>
      </view>
      <view class="income">累计收入(元)</view>
      <view class="income-num" @click="linkMyWallet()">{{
        workerInfor.accountVO && workerInfor.accountVO.totalAmount
          ? workerInfor.accountVO.totalAmount
          : 0
      }}</view>
      <view class="income-infor" @click="linkMyWallet()">
        <view class="income-item">
          <view class="title">近30天收入(元)</view>
          <view class="num">*</view>
        </view>
        <view class="income-item">
          <view class="title">账户余额(元)</view>
          <view class="num">*</view>
        </view>
        <view class="income-item">
          <view class="title">待入账(元)</view>
          <view class="num">*</view>
        </view>
      </view>
    </view>
    <view v-if="auditStatus != 1">
      <view class="staging-container">
        <view class="title">最近新单</view>
        <view class="staging-list">
          <swiper
            class="swiper"
            circular
            :indicator-dots="false"
            :vertical="true"
            :autoplay="true"
            :disable-touch="false"
            :display-multiple-items="4"
            :interval="1000"
            :duration="2000"
          >
            <swiper-item
              class="item"
              v-for="item in requestOrderList"
              :key="item.id"
            >
              <view class="list">
                <view class="name">{{ item.orderCategoryName }}</view>
                <view class="time name">{{
                  item.serviceTime
                    ? formatTimes(item.serviceTime, "YYYY/MM/DD hh:mm:ss")
                    : ""
                }}</view>
                <view class="price">{{ item.viewOrderAmount }}</view>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <u-button type="primary" @click="becomingWorker" class="btn"
        >成为师傅</u-button
      >
    </view>
    <view v-else class="order-container">
      <view class="order" v-if="orderList && orderList.length > 0">
        <view class="order-list" v-for="item in orderList" :key="item.id">
          <view @click="linkOrderDetail(item)">
            <view class="status-infor-top">
              <view class="status">进行中</view>
              <view class="time">{{
                item.gmtCreate
                  ? formatTimes(item.gmtCreate, "YYYY/MM/DD hh:mm:ss")
                  : ""
              }}</view>
              <view class="link-detail">
                <view class="title">订单详情</view>
                <view class="u-icon"
                  ><u-icon name="arrow-right" color="#24345b" size="12"></u-icon
                ></view>
              </view>
            </view>
            <view class="name-and-price">
              <view class="name">{{ item.requestOrderCategoryName }}</view>
              <view class="price">{{ item.requestOrderPrice }}</view>
            </view>
            <view class="address">{{ item.userAddress }}</view>
          </view>
          <view class="btn-container">
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="联系客户"
              @click="callUser(item.userPhone)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="抵达确认"
              :disabled="item.status !== 10"
              @click="showConfirmArrivalDialog(item)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              shape="circle"
              size="small"
              :plain="true"
              :hairline="true"
              text="施工照片"
              :disabled="item.status !== 20 && item.status!== 50"
              @click="linkAddPic(item)"
            ></u-button>
            <u-button
              class="btn-list"
              type="primary"
              :hairline="true"
              shape="circle"
              size="small"
              text="完成订单"
              :disabled="item.status !== 50"
              @click="completeOrder(item)"
            ></u-button>
          </view>
        </view>
      </view>
      <u-empty
        v-if="isEmpty"
        text="订单为空"
        mode="order"
        icon="http://cdn.uviewui.com/uview/empty/car.png"
      >
      </u-empty>
    </view>
    <u-modal
      width="460rpx"
      :show="showModel"
      :title="title"
      :content="content"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="cancel"
    ></u-modal>
    <u-loading-icon
      text="加载中..."
      :show="isLoading"
      textSize="14"
    ></u-loading-icon>
  </view>
</template>

<script>
import seizeOrdersTop from "@/static/images/seize_orders_top.png";
import {
  getOrderList,
  getOrderDetail,
  orderSign,
  orderFinish,
  getRequestOrderList,
} from "@/api/order";
import { workerDetail } from "@/api/worker";
import { formatTimes } from "@/utils/index";
export default {
  data() {
    return {
      formatTimes,
      seizeOrdersTop,
      showModel: false,
      title: "提示",
      content: "",
      modelType: "",
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      orderList: [],
      requestOrderList: [], //未入驻抢单列表
      isLoading: false,
      itemData: {},
      lastPageIndex: 0,
      isEmpty: false,
      auditStatus: "",
      workerInfor: {},
    };
  },
  onLoad() {},
  onShow() {
    this.page.pageNo = 1;
    this.orderList = [];
    this.workerDetail();
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    this.page.pageNo = 1;
    this.orderList = [];
    this.getOrderList();
  },
  // 上拉加载
  onReachBottom() {
    console.log("上拉加载");
    if (this.page.pageNo < this.lastPageIndex) {
      this.page.pageNo++;
      this.getOrderList();
    }
  },
  mounted() {},
  methods: {
    async workerDetail() {
      try {
        const res = await workerDetail();
        uni.setStorageSync("workerInfor", JSON.stringify(res.data));
        this.auditStatus = res.data.auditStatus;
        this.workerInfor = res.data;
        // 审核通过调取订单列表，不通过调取需求单列表
        if (this.auditStatus === 1) {
          const areaList = res.data.areaList;
          const categoryList = res.data.categoryList;
          const areaListData = [];
          const categoryListData = [];
          areaList.forEach((item) => {
            areaListData.push(item.areaId);
          });
          categoryList.forEach((item) => {
            categoryListData.push(item.categoryId);
          });
          uni.setStorageSync("areaList", JSON.stringify(areaListData));
          uni.setStorageSync("categoryList", JSON.stringify(categoryListData));
          this.getOrderList();
        } else {
          this.getRequestOrderList();
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getRequestOrderList() {
      try {
        const areaId = uni.getStorageSync("areaId");
        const categoryId = uni.getStorageSync("categoryId");
        const parmas = {
          areaId,
          orderCategoryId: categoryId,
          pageNo: 1,
          pageSize: 10,
        };
        const res = await getRequestOrderList(parmas);
        const list = res.data.objects;
        this.requestOrderList = list;
        uni.stopPullDownRefresh();
      } catch (error) {
        console.log(error);
      }
    },
    async getOrderList() {
      try {
        this.isLoading = true;
        const parmas = {
          status: [10, 20, 50],
          ...this.page,
        };
        const res = await getOrderList(parmas);
        const list = res.data.objects;
        this.isLoading = false;
        this.orderList = [...this.orderList, ...list];
        this.lastPageIndex = res.data.lastPageIndex;
        this.orderList.length <= 0
          ? (this.isEmpty = true)
          : (this.isEmpty = false);
        uni.stopPullDownRefresh();
      } catch (error) {
        this.isLoading = false;
        console.log(error);
      }
    },
    becomingWorker() {
      uni.navigateTo({
        url: "/pages/workerSettlement/index",
      });
    },
    // 拨打电话
    callUser(phone) {
      uni.makePhoneCall({
        phoneNumber: phone,
        success: function () {
          console.log("拨打电话成功");
        },
        fail() {
          console.log("打电话失败了");
        },
      });
    },
    // 确认抵达
    showConfirmArrivalDialog(item) {
      this.showModel = true;
      this.title = "确认抵达？";
      this.content = "确认将无法取消哦！";
      this.modelType = "arrive";
      this.itemData = item;
    },

    // 完成订单
    async completeOrder(item) {
      this.itemData = item;
      const res = await getOrderDetail(this.itemData.orderNo);
      if (res.data.attachInfo.length <= 0) {
        return wx.showToast({
          title: "请先上传施工图片！",
          icon: "none",
          duration: 2000,
        });
      }
      this.showModel = true;
      this.title = "确定完成订单？";
      this.content = "确认将无法取消哦！";
      this.modelType = "completeOrder";
    },
    //关闭确认model
    cancel() {
      this.showModel = false;
    },
    // 点确认model
    async confirm() {
      // modelType为 completeOrder 为完成订单功能
      // modelType为 arrive 为确认抵达功能
      if (this.modelType === "completeOrder") {
        // 完成订单
        try {
          await orderFinish({ orderNo: this.itemData.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.cancel();
      } else {
        // 确认抵达
        try {
          await orderSign({ orderNo: this.itemData.orderNo });
          wx.showToast({
            title: "成功！",
            icon: "none",
            duration: 2000,
          });
        } catch (error) {
          wx.showToast({
            title: "失败",
            icon: "none",
            duration: 2000,
          });
        }
        this.cancel();
      }
      this.loadOrderList();
    },
    // 重新初始化加载数据
    loadOrderList() {
      this.page.pageNo = 1;
      this.orderList = [];
      this.getOrderList();
    },
    // 链接到详情页面
    linkOrderDetail(item) {
      uni.navigateTo({
        url: `/pages/order/orderDetail?orderNo=${item.orderNo}`,
      });
    },
    // 链接到添加照片
    linkAddPic(item) {
      uni.navigateTo({
        url: `/pages/addPic/index?orderNo=${item.orderNo}`,
      });
    },
    // 跳转到我的钱包
    linkMyWallet() {
      uni.navigateTo({
        url: "/pages/myWallet/index",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6fa;
}
.staging {
  .staging-top {
    position: relative;
    .nav-bar {
      height: 88rpx;

      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      .nav-title {
        color: #fff;
        text-align: center;
        flex: 1;
        font-weight: 700;
        font-size: 16px;
        line-height: 88rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .income {
      font-size: 28rpx;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 44rpx;
      text-align: center;
      padding: 128rpx 0 32rpx 0;
    }
    .income-num {
      font-size: 80rpx;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      line-height: 96rpx;
      text-align: center;
    }
    .income-infor {
      width: 96%;
      height: 130rpx;
      background: #ffffff;
      border-radius: 16rpx;
      position: absolute;
      bottom: -30rpx;
      left: 2%;
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0rpx;
      .income-item {
        text-align: center;
        width: 33.3%;
        .title {
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #808080;
          line-height: 76rpx;
        }
        .num {
          font-size: 38rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #353535;
          line-height: 44rpx;
        }
      }
    }
  }
  .staging-container {
    width: 96%;
    background: #ffffff;
    border-radius: 16rpx;
    margin: 64rpx auto;
    .title {
      font-size: 34rpx;
      font-family: Source Han Sans CN-Medium, Source Han Sans CN;
      font-weight: 500;
      color: #353535;
      line-height: 52rpx;
      text-align: center;
      padding: 32rpx 0 16rpx 0;
    }
    .staging-list {
      .swiper {
        .item {
          .list {
            height: 60rpx;
            background: #f5f6fa;
            border-radius: 8rpx;
            margin: 0rpx 20rpx 16rpx 20rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: space-between;
            .name {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #24345b;
              margin-left: 20rpx;
            }
            .price {
              font-size: 28rpx;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ef6d44;
              margin-right: 20rpx;
            }
          }
        }
      }
    }
  }
  .btn {
    width: 90%;
  }
  .order-container {
    width: 96%;
    margin: 0 auto;
    .order {
      margin-top: 64rpx;
      .order-list {
        height: 250rpx;
        background: #ffffff;
        border-radius: 16rpx;
        padding: 24rpx 30rpx 40rpx 30rpx;
        margin-bottom: 30rpx;
        .status-infor-top {
          display: flex;
          justify-content: space-between;
          .status {
            height: 30rpx;
            background: #457ef6;
            border-radius: 6rpx;
            font-size: 20rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            line-height: 30rpx;
            padding: 8rpx;
          }
          .time {
            font-size: 24rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #24345b;
            line-height: 46rpx;
            flex: 1;
            margin-left: 24rpx;
          }
          .link-detail {
            font-size: 24rpx;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #24345b;
            line-height: 46rpx;
            display: flex;
            .title {
              margin-right: 10rpx;
            }
            .u-icon {
              margin-top: 6rpx;
            }
          }
        }
        .name-and-price {
          padding: 24rpx 0 14rpx 0;
          display: flex;
          .name {
            font-size: 36rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #000000;
            line-height: 44rpx;
            flex: 1;
          }
          .price {
            font-size: 32rpx;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #ef6d44;
            line-height: 50rpx;
            &:before {
              content: "¥";
              font-size: 20rpx;
              font-weight: normal;
            }
          }
        }
        .address {
          font-size: 28rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #000000;
        }
        .btn-container {
          display: flex;
          justify-content: flex-start;
          margin-top: 36rpx;
          .btn-list {
            width: 22%;
          }
        }
      }
    }
  }
}
</style>
